<template>
    <div>
        <Row>
            <Col span="6" style="padding-right:10px">
                <iSelect
                    v-model="siteData"
                    remote
                    clearable
                    label="选择场地"
                    :loading="remoteLoading"
                    :on-change="handleSiteChange"
                    :on-clear="handleSiteClear">
                    <Option v-for="item in siteDatas" :value="item.id" :key="item.id">{{item.name}}</Option>
                </iSelect>
            </Col>
            <Col span="6" style="padding-right:10px">
                <iSelect
                    v-model="bookingStatus"
                    remote
                    clearable
                    label="请选择预约状态"
                    :on-change="handleStatusChange"
                    :on-clear="handleStatusClear">
                    <Option v-for="item in bStatus" :value="item.id" :key="item.id">{{item.name}}</Option>
                </iSelect>
            </Col>

            <Col span="6" style="padding-right:10px">
                <Button type="primary" :loading="loading" @click="reLoading">刷新</Button>
            </Col>
        </Row>
        <Table border :loading="loading" :columns="columns" :data="bookingData"
               @on-selection-change="handleSelectionChange" style="margin-top: 10px;"></Table>
        <ButtonGroup style="margin-top: 10px;">
            <Button @click="handleSelectionBack">批量驳回</Button>
            <Button @click="handleSelectionPass">批量通过</Button>
        </ButtonGroup>
        <Page :total="totalPage" size="small"
              show-total
              show-elevator
              :current="thisPage"
              :page-size="pageSize"
              style="position: absolute;right: 20px;margin-top: 20px;margin-bottom: 20px;"
              @on-page-size-change="handlePageSizeChange"
              @on-change="handlePageChange"/>
        <Modal title="详情" v-model="detailModel">
            <div v-if="detailModel">
                <div class="item">
                    <div class="item-title">预约场地:</div>
                    <div class="item-value">{{details.site.name}}</div>
                </div>
                <div class="item">
                    <div class="item-title">预约时间:</div>
                    <div class="item-value">{{details.booking_day}} {{details.time_msg}}</div>
                </div>
                <div class="item">
                    <div class="item-title">填写时间:</div>
                    <div class="item-value">{{details.create_time}}</div>
                </div>
                <div class="item">
                    <div class="item-title">预约状态:</div>
                    <div class="item-value" style="color: red;">{{details.istatus}}</div>
                </div>
                <Divider/>
                <!--{{details.answer}}-->
                <div class="item" v-for="item in details.answer">
                    <div class="item-title">{{item.name}}:</div>
                    <div class="item-value">{{item.answer}}</div>
                </div>
                <div class="item">
                    <div class="item-title">附件图片:</div>
                    <div class="demo-upload-list" v-for="itemAnnex in details.annex">
                        <img :src="itemAnnex.imageAddress">
                        <div class="demo-upload-list-cover">
                            <Icon type="ios-eye-outline" @click.native="handleView(itemAnnex)"></Icon>
                        </div>
                    </div>
                </div>
            </div>
        </Modal>
        <Modal v-model="imgModal" title="查看图片">
            <img :src="imgSrc" width="100%" alt="">
        </Modal>
    </div>
</template>

<script>
    import {bookingManege, getMySite, bookingHandle} from "../../api/manager";

    export default {
        name: "bookingMessage",
        data() {
            return {
                imgSrc: '',
                imgModal: false,
                toLoading: false,
                siteData: 0,
                bookingStatus: 0,
                siteDatas: [],
                remoteLoading: false,
                loading: true,
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        // "fixed": "left",
                    },
                    {
                        title: 'id',
                        key: 'id',
                        align: 'center',
                        width: 60,
                        // "fixed": "left",
                    },
                    {
                        title: '预约日期',
                        key: 'booking_day',
                    },
                    {
                        title: '预约名称',
                        key: 'booking_day',
                        render: (h, params) => {
                            return h('strong', params.row.site.name)
                        }
                    },
                    {
                        title: '预约时间',
                        key: 'time_msg'
                    },
                    {
                        title: '表单1',
                        key: '',
                        render: (h, params) => {
                            return h('strong', params.row.answer[0].answer)
                        }
                    },
                    {
                        title: '表单2',
                        key: '',
                        render: (h, params) => {
                            return h('strong', params.row.answer[1].answer)
                        }
                    },
                    {
                        title: '状态',
                        key: 'status',
                        align: 'center',
                        width: 140,
                        render: (h, params) => {
                            if (params.row.status === 1) {
                                return h('Tag', {
                                    props: {
                                        type: 'dot',
                                        color: 'primary'
                                    }
                                }, '待审核')
                            }
                            if (params.row.status === 2) {
                                return h('Tag', {
                                    props: {
                                        type: 'dot',
                                        color: 'success'
                                    }
                                }, '审核通过')
                            }
                            if (params.row.status === 3) {
                                return h('Tag', {
                                    props: {
                                        type: 'dot',
                                        color: 'error'
                                    }
                                }, '不通过')
                            }
                            if (params.row.status === 4) {
                                return h('Tag', {
                                    props: {
                                        type: 'dot',
                                        color: 'error'
                                    }
                                }, '已取消')
                            }
                        }
                    },
                    {
                        title: '创建时间',
                        key: 'create_time'
                    },
                    {
                        title: '操作',
                        key: 'status',
                        align: 'center',
                        width: 80,
                        render: (h, params) => {
                            return h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.detailModel = true
                                        let data = params.row
                                        this.details = data
                                        if (params.row.status === 1)
                                            this.details.istatus = '待审核'
                                        if (params.row.status === 2)
                                            this.details.istatus = '审核通过'
                                        if (params.row.status === 3)
                                            this.details.istatus = '不通过'
                                        if (params.row.status === 4)
                                            this.details.istatus = '已取消'
                                    }
                                }
                            }, '详情')
                        }
                    },
                ],
                bookingData: [],
                totalPage: 1,
                thisPage: 1,
                pageSize: 10,
                details: {},
                detailModel: false,
                selectionData: [],
                bStatus: [
                    {
                        name: '待审核',
                        id: 1
                    },
                    {
                        name: '审核通过',
                        id: 2
                    },
                    {
                        name: '不通过',
                        id: 3
                    },
                    {
                        name: '已取消',
                        id: 4
                    },
                ],
                msg: ''
            }
        },
        methods: {
            handleView(value) {
                this.imgModal = true
                this.imgSrc = value.imageAddress
            },
            handleSelectionChange(value) {
                this.selectionData = value
            },
            handlePageSizeChange(value) {
                this.pageSize = value
            },
            handleStatusChange(value) {
                this.bookingStatus = value
            },
            handleStatusClear() {
                this.bookingStatus = 0
            },
            handlePageChange(value) {
                this.thisPage = value
            },
            handleSiteChange(value) {
                this.siteData = value
            },
            handleSiteClear() {
                this.siteData = 0
            },
            handleSelectionBack() {
                this.msg = '审核不通过'
                this.handleSelect('fail')
            },
            handleSelectionPass() {
                this.msg = '审核通过'
                this.handleSelect('success')
            },
            handleSelect(action) {
                let ids = []
                for (let i in this.selectionData) {
                    ids.push(this.selectionData[i].id)
                }
                if (ids.length <= 0) {
                    this.$Message.error('请先勾选')
                    return
                }
                this.$Modal.confirm({
                    loading: true,
                    title: '请输入反馈给预约者的回复内容',
                    render: (h) => {
                        return h('div', [
                            h('Input', {
                                props: {
                                    value: this.msg,
                                    autofocus: true,
                                    placeholder: '请输入回馈信息'
                                },
                                style: {
                                    marginTop: '25px'
                                },
                                on: {
                                    input: (val) => {
                                        this.msg = val;
                                    }
                                }
                            })
                        ])
                    },
                    onOk: () => {
                        let data = {
                            bookingIds: ids,
                            action: action,
                            msg: this.msg
                        }
                        bookingHandle(data).then(res => {
                            if (res.code === 0) {
                                this.$Message.success('操作成功')
                                this.$Modal.remove()
                                this.init()
                                this.selectionData = []
                            }
                        })
                    }
                })

            },
            reLoading() {
                this.init()
                getMySite().then(res => {
                    this.siteDatas = res.data
                })
            },
            init() {
                this.loading = true
                bookingManege(this.siteData, this.thisPage, this.pageSize, this.bookingStatus).then(res => {
                    this.loading = false
                    for (let i in res.data.data) {
                        if (res.data.data[i].status !== 1)
                            res.data.data[i]._disabled = true
                    }
                    this.bookingData = res.data.data
                    this.totalPage = res.data.total
                })
            }
        },
        watch: {
            'thisPage': 'init',
            'siteData': 'init',
            'bookingStatus': 'init',
        },
        created() {
            getMySite().then(res => {
                this.siteDatas = res.data
            })
            this.init()
        }
    }
</script>

<style scoped>
    .item {
        margin: 5px 0;
        display: flex;
    }

    .item-title {
        margin-right: 30px;
    }

    .item-value {

    }
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
